<template>
  <div class="time-picker">
    <span class="icon" @click="slideUpTimePicker">
      <i class="iconfont iconty_zhuangtailan_riqi"></i>
    </span>
    <bc-modal v-show="showTimePicker" ref="modal">
      <slide-up-time 
        ref="slideup"
        :show="showTimePicker" 
        @click="handleTimeSelect"
        @pass-data="updateSelectedDay"
        @pass-msg="updateSelectedTime"
        @hide="hide"
        @now="now"
        >
      </slide-up-time>
    </bc-modal>
  </div>
</template>

<script>
import BcModal from '@/components/base/bc-modal/bc-modal'
import SlideUpTime from '@/components/slide-up-time/slide-up-time'
import { formatDate } from '@/assets/js/util'
import { mapMutations } from 'vuex'
export default {
  components: {
    BcModal,
    SlideUpTime
  },
  data() {
    return {
      showTimePicker: false,
      selectedTime: ''
    }
  },
  mounted() {
    this.slideup = this.$refs.slideup.$el 
    this.modal = this.$refs.modal.$el 
    // console.log(slideup)
    this.modal.addEventListener('click', (e) => {
      if (!this.slideup.contains(e.target)) {
        this.showTimePicker = false 
      }
    })
  },
  destroyed() {
    this.modal.removeEventListener('click', (e) => {
      if (!this.slideup.contains(e.target)) {
        this.showTimePicker = false 
      }
    })
  },
  methods: {
    slideUpTimePicker() {
      this.showTimePicker = true
    },
    handleTimeSelect() {
      this.showTimePicker = false
    },
    updateSelectedDay(obj) {
      this.selectedTime = obj.dayName
      this.showTimePicker = false 
    },
    updateSelectedTime(start, end) {
      this.showTimePicker = false
      this.selectedTime = `${formatDate(start)}~${formatDate(end)}`
      // console.log(this.selectedTime)
    },
    now(time) {
      this.showTimePicker = false 
      this.selectedTime = '现在'
    },
    hide() {
      this.showTimePicker = false
    },
    ...mapMutations('lottery', {
      setSelectedTime: 'SET_SELECTED_TIME'
    })
  },
  watch: {
    selectedTime(newVal) {
      this.$emit('click', newVal)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/mixins.styl'
  .time-picker 
    width 40px 
    height 100% 
    line-height 40px 
    text-align center
    box-shadow -3px 0px 6px #ccc
    .icon 
      extend-click()
</style>